<template>
  <div>
    <!-- 在浏览器上获取点，水平坐标和垂直坐标
    event event的数据类型 MouseEvent
    pageX
    pageY
    
     -->
    <h1>x的坐标{{ x }}</h1>
    <h1>y的坐标{{ y }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted, ref } from "vue";

export default defineComponent({
  setup() {
    // 没有的话造
    const x = ref(0);
    const y = ref(0);

    // 绑定的事件对应的回调函数
    const updatePosition = (e: MouseEvent) => {
      x.value = e.pageX;
      y.value = e.pageY;
    };
    // 点击界面获取xy的值
    // 浏览器界面 document，document上面绑定事件， DOM
    // 什么时候能操作DOM？ setup是在beforeCreate之前创建的直接操作不可以
    //在mounted时是最早可以操作DOM元素的时刻，vue3当中的mounted onMounted
    onMounted(() => {
      // 在此时是最早能操作DOM的时刻
      document.addEventListener("click", updatePosition);
    });

    // 离开取消事件
    onUnmounted(() => {
      // 离开取消addEventListener绑定的事件
      document.removeEventListener("click", updatePosition);
    });

    // 自定义hook
    // hook的作用就是将具有特定功能的一段代码封装起来，什么时候用，什么时候调用  模块的复用功能
    return {
      x,
      y,
    };
  },
});
</script>

<style scoped>
</style>